<template>
  <div class="publish">
    <header class="header">发布</header>
    <van-form class="form">
      <input
        type="text"
        placeholder="请输入标题"
        class="input"
        v-model="title"
        @input="subCharstr"
      />
      <div class="select">
        <van-picker
          title="请选择发布位置"
          class="titles"
          show-toolbar
          visible-item-count="1"
          :columns="titles"
          @confirm="onConfirm"
        />
      </div>
      <div class="textarea">
        <van-field
          v-model="content"
          rows="4"
          label="内容"
          type="textarea"
          maxlength="1000"
          placeholder="记录新鲜事儿...`"
          show-word-limit
          @blur="textInput"
        />
      </div>

      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="fileList" multiple max-count="3" />
        </template>
      </van-field>

      <button class="button" @click="send">发布</button>
    </van-form>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/views/Footer.vue";
import { mapState } from "vuex";
import UploadQiniu from "@/utils/UploadQiniu";
import subCharStr from "./text.js";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      fileList: [],
      title: "",
      content: "",
      name: "",
      _id: "",
      author: "",
      author_id: "",
    };
  },
  computed: {
    ...mapState(["titles", "id"]),
  },
  methods: {
    async send() {
      let { fileList } = this;
      let imgUrlList = await UploadQiniu(fileList);
      // console.log(imgUrlList);
      const result = await this.$http.post("/api/add_article", {
        title: this.title,
        content: this.content,
        cate_name: this.name,
        cate_id: this._id,
        author: this.author,
        author_id: this.author_id,
        imageSrc: imgUrlList,
      });
      if (result?.data?.code === 0) {
        this.title = "";
        this.content = "";
        this.fileList = [];
        this.$toast("发布成功");
      }
    },
    onConfirm(value, index) {
      this.name = value;
      this._id = this.id[index];
    },
    textInput() {
      if (this.content.length <= 15) {
        this.$toast("内容太少");
        return false;
      }
    },
    titleInput() {
      if (this.title.length >= 40) {
        return this.$toast("标题过长，请减少字数");
      }
    },
    subCharstr() {
      if (this.title.length >= 40) {
        this.$toast("标题太长，请简短一点");
        this.title = subCharStr(this.title, 40);
      }
    },
  },
  async created() {
    this.$store.dispatch("getTitleList");
    const tokens = localStorage.getItem("token");
    const result = await this.$http.post("/user/getuserInfo", {
      token: tokens,
    });
    this.author = result.data.userInfo.nickname;
    this.author_id = result.data.uid;
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "@/common/change.less";
.select {
  height: 80px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  font-size: 14px;
}

.publish {
  // background-color: rgb(244, 227, 227);
  background-color: rgb(247, 247, 247);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.header,
.button {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  background-color: @color-bgColor;
}
.form {
  position: relative;
  margin: 8px 0 30px 0;
  font-size: 14px;
  .input {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
  }
  .textarea {
    margin-top: 85px;
    width: 100%;
    padding: 10px 0;
  }
  .button {
    position: absolute;
    top: 430px;
    left: 10%;
    width: 300px;
    border: none;
    box-shadow: 1px 2px 8px rgb(255, 221, 221);
  }
  .iconfont {
    position: absolute;
    top: 260px;
    left: 30px;
    color: rgb(255, 121, 210);
    font-size: 30px;
  }
}
</style>
